<html>
<head>
	<base href="/">
	<meta charset="UTF-8">
	<title>Title</title>
	<link rel="stylesheet" href="assets/layui/css/layui.css">
	<link rel="stylesheet" href="assets/css/base.css">
	<style>

	</style>
</head>
<body>

<div class="page fx-col">
	<div class="noshrink fx">
		<div class="fx-g1 fx align-center layui-form" style="overflow: inherit">
			<select name="tcs.gradeId" lay-verify="required|number" id="grade">
				<option value="">选择年级</option>
			</select>
			<select name="tcs.classId" lay-verify="required|number" id="clazz">
				<option value="">选择班级</option>
			</select>
			<button id="search_btn" class="layui-btn ml-10">搜索</button>
		</div>
	</div>

	<div class="fx-g1">
		<form id="form" >
			<table class="layui-table " id="table">
				<thead>
				<tr>
					<th>序号</th>
					<th>学生名称</th>
					<th>学生学号</th>
					<th>数学</th>
					<th>语文</th>
					<th>英语</th>
				</tr>
				</thead>
			</table>
		</form>
	</div>

	<div class="fx align-center valign-center noshrink">
		<button class="layui-btn layui-btn-normal" id="save_btn">保存</button>
	</div>


</div>


</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="assets/layui/layui.all.js"></script>
<script src="assets/js/base.js"></script>

<script>
	let examId = getUrlParam("id");

	async function search() {
		let students = await loadStudentList();
		let subjects = await loadSubjects();
		let scores = await loadStudentScores();

		let scoreMap = {};
		for(let score of scores) {
			scoreMap[score.studentId+"_"+score.subjectId] = score;
		}




		let gradeId = $("#grade").val();
		let gradeName = $("#grade option:selected").text();
		let classId = $("#clazz").val();
		let className = $("#clazz option:selected").text();

		let content = `
			<thead>
				<tr>
					<th>序号</th>
					<th>学生名称</th>
					<th>学生学号</th>
					${subjects.map(item => {return `<th>${item.name}</th>`}).join(" ")}
				</tr>
			</thead>
			<tbody>
				${students.map((stu, i) => {
			return `
					<tr>
						<td>${i+1}</td>
						<td>${stu.name}</td>
						<td>${stu.sn}</td>
						${subjects.map((sub, j ) => {
				let score = scoreMap[stu.id+"_"+sub.id];
				return `
							<td>
								<input type="text" class="layui-input" value="${(score&&score.score)?score.score:''}" name="scores[${i*subjects.length + j}].score"   />
								<input type="hidden"  name="scores[${i*subjects.length + j}].id" value="${score?score.id:''}"   />
								<input type="hidden"  name="scores[${i*subjects.length + j}].gradeId" value="${gradeId}"   />
								<input type="hidden"  name="scores[${i*subjects.length + j}].gradeName" value="${gradeName}"   />
								<input type="hidden"  name="scores[${i*subjects.length + j}].classId" value="${classId}"   />
								<input type="hidden"  name="scores[${i*subjects.length + j}].className" value="${className}"   />
								<input type="hidden"  name="scores[${i*subjects.length + j}].subjectId" value="${sub.id}"   />
								<input type="hidden"  name="scores[${i*subjects.length + j}].subjectName" value="${sub.name}"   />
								<input type="hidden"  name="scores[${i*subjects.length + j}].studentId" value="${stu.id}"   />
								<input type="hidden"  name="scores[${i*subjects.length + j}].examId" value="${examId}"   />
							</td>
							`
			}).join("")}
					</tr>
					`

		}).join("")}
			</tbody>
		`
		$("#table").html(content);
	}

	function loadStudentScores() {
		return new Promise((resolve, reject) => {
			let classId = $("#clazz").val();
			if(classId <= 0) {
				layer.msg("请选择班级", {icon: 2});
				reject();
			}
			$.ajax({
				url: `/score/list?examId=${examId}&classId=${classId}`,
				dataType: "json",
				success: res => {
					if(res.success) {
						resolve(res.data);
					} else {
						layer.msg(res.msg, {icon: 2});
						reject(res.msg);
					}


				}
			})
		})

	}

	/**
	 * 加载年级
	 */
	function loadGradeOptions() {
		$.ajax({
			url: "exam/listExamGrades?examId="+examId,
			dataType: "json",
			success(res) {
				let list = res.data;
				list.unshift({id:"", name:"选择年级"});
				var content = list.map(item => {
					return `<option value="${item.id}">${item.name}</option>`
				}).join("");
				$("#grade").html(content);
				layui.form.render('select');
			}
		})
	}
	/**
	 * 加载年级
	 */
	function loadSubjects() {
		return new Promise((resolve, reject) => {
			$.ajax({
				url: "exam/listExamSubjects?examId="+examId+"&gradeId="+$("#grade").val(),
				dataType: "json",
				success(res) {
					console.log(4);
					if(res.success) {
						resolve(res.data);
					} else {
						layer.msg(res.msg, {icon: 2});
						reject(res.msg);
					}
				}
			})
		})

	}

	/**
	 * 加载班级
	 */
	function loadClassOptions() {
		var gradeId = $("#grade").val();
		var content = "";
		if (!gradeId) {
			content = '<option value="">选择班级</option>';
			$("#clazz").html(content);
		} else {
			$.ajax({
				url: "clazz/list?gradeId="+gradeId,
				dataType: "json",
				success(res) {
					let list = res.data;
					list.unshift({id:"", name:"选择班级"});
					var content = list.map(item => {
						return `<option value="${item.id}">${item.name}</option>`
					}).join("");
					$("#clazz").html(content);
					layui.form.render('select');
				}
			})
		}

	}

	/**
	 * 加载学生列表
	 */
	function loadStudentList() {
		return new Promise(	(resolve, reject) => {
			$.ajax({
				url: "/student/listByClass?classId=" + $("#clazz").val(),
				dataType: "json",
				success: res => {
					console.log(2);
					if(res.success) {
						resolve(res.data);
					} else {
						layer.msg(res.msg, {icon: 2});
						reject(res.msg)
					}
				}
			})
		})



	}


	$(function () {
		$(document).on("click", "#search_btn", function () {
			search();
		}).on("click", "#save_btn", function () {
			let data = $("#form").serialize();
			$.ajax({
				url: "/score/save",
				type: "post",
				data: data,
				dataType: "json",
				success: res=> {
					if(res.success) {
						layer.msg("保存成功", {icon: 1}, function () {
							search();
						});
					} else {
						layer.msg(res.msg, {icon: 2});
					}
				}
			})
		})

		var form = layui.form;
		form.on('select()', function(data){
			if($(data.elem).attr("id") == "grade" ) {
				loadClassOptions();
			}

		});

		loadGradeOptions();

	})
</script>
</html>
